Invalid<template>
    <div class="page-box">
        <div class="page-search">

            <div>
                <label>供应商编码</label>
                <el-input v-model="searchForm.VendorCode" style="width: 160px;"></el-input>
            </div>
            <div>
                <label>供应商名称</label>
                <el-input v-model="searchForm.VendorName" style="width: 160px;"></el-input>
            </div>
            <div>
                <label>供应商简称</label>
                <el-input v-model="searchForm.VendorNick" style="width: 160px;"></el-input>
            </div>
            <div>
                <label>英文名称</label>
                <el-input v-model="searchForm.VendorEn" style="width: 160px;"></el-input>
            </div>
            <div>
                <label>供应商电话</label>
                <el-input v-model="searchForm.Tel" style="width: 160px;"></el-input>
            </div>
            <div>
                <label>供应商等级</label>
                <el-select v-model="searchForm.VendorLevel" placeholder="请选择供应商等级" style="width: 160px;">
                    <el-option label="优质供应商" value="优质供应商"></el-option>
                    <el-option label="正常" value="正常"></el-option>
                    <el-option label="重点关注" value="重点关注"></el-option>
                    <el-option label="劣质供应商" value="劣质供应商"></el-option>
                    <el-option label="黑名单" value="黑名单"></el-option>
                </el-select>
            </div>

            <div>
                <label>是否启用</label>
                <el-select v-model="searchForm.EnableFlag" placeholder="请选择是否启用" style="width: 160px;">
                    <el-option label="是" value="Y"></el-option>
                    <el-option label="否" value="N"></el-option>
                </el-select>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="page-section">
            <div class="page-tool">
                <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
                <el-dropdown class="mg-l">
                    <el-button size="small" type="primary" plain>
                        <i class="el-icon-s-grid"></i>
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>

            <!--表单-->
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="VendorCode" label="供应商编码" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="VendorName" label="供应商名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="VendorNick" label="供应商简称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="VendorLevel" label="供应商等级" :show-overflow-tooltip="true"></el-table-column>


                <el-table-column prop="VendorScore" label="供应商评分" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-rate :value="scope.row.VendorScore" disabled
                            :score-template="`${scope.row.VendorScore}`"></el-rate>
                    </template>
                </el-table-column>
                <el-table-column prop="Tel" label="供应商电话" :show-overflow-tooltip="true"></el-table-column>

                <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>


                <el-table-column label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row)">编辑</el-button>
                        <el-button type="text" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />


        </div>
        <!--弹窗-->
        <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
            width="50%" @close="closeDialog">
            <VendorInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible" />
        </el-dialog>

    </div>
</template>

<script>
import VendorInput from './components/VendorInput.vue';

import Pagination from '@/components/Pagination.vue';
export default {
    components:{
        VendorInput,
        Pagination
    },
    data(){
        return{
            searchForm:{
                VendorCode:'',
                VendorName:'',
                VendorNick:'',
                VendorEn:'',
                Tel:'',
                VendorLevel:'',
                EnableFlag:''
            },
            dialogDomain:{
                title:"新增供应商",
                dialogVisible:false
            },
            isUpdate:false,
            model:{
                VendorCode:'',
                VendorName:'',
                VendorNick:'',
                VendorEn:'',
                VendorDes:'',
                Address:'',
                VendorLevel:'正常',
                VendorScore:0,
                Website:'',
                Email:'',
                Tel:'',
                Contact1:'',
                Contact1Tel:'',
                Contact1Email:'',
                Contact2:'',
                Contact2Tel:'',
                Contact2Email:'',
                CreditCode:'',
                Remark:'',
                EnableFlag:'Y',
            }, 
            pageDomain:{
                PageIndex:1,
                PageSize:10,
                TotalCount:0
            },
            tableData:[],
            isLoading:false



        }
    },
    mounted(){
        this.dataBind();
    },
    methods:{
        add(){
            this.isUpdate=false;
            this.dialogDomain.title="新增类别";
            this.dialogDomain.dialogVisible=true;
            
        },
        update(model){
            this.dialogDomain.title="编辑规格";
            this.dialogDomain.dialogVisible=true;
            this.isUpdate=true;

            console.log(model);
            this.model=model;
        },
        dels(){
            if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                
                //获取选中的表格数据 并筛选id
                var ids =this.$refs.dataForm.selection.map(x=>x.Id)

                //拼接参数
                let params =  new URLSearchParams();
                params.append('ids',ids.join(','))

                this.$http.delete('/api/Vendor/DelAll',{
                    data:params,
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});     
            
        },
        //删除单条
        del(model){
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$http.delete('/api/Vendor',{
                    data:{
                        id:model.Id
                    },
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});  
        },


         //对话框关闭事件
         closeDialog(){
            this.model={
                
                VendorCode:'',
                VendorName:'',
                VendorNick:'',
                VendorEn:'',
                VendorDes:'',
                Address:'',
                VendorLevel:'正常',
                VendorScore:0,
                Website:'',
                Email:'',
                Tel:'',
                Contact1:'',
                Contact1Tel:'',
                Contact1Email:'',
                Contact2:'',
                Contact2Tel:'',
                Contact2Email:'',
                CreditCode:'',
                Remark:'',
                EnableFlag:'Y',
            }
        },
        search(){
            this.pageDomain.PageIndex=1;
            this.dataBind();
        },
        reset(){
            this.searchForm.VendorCode='';
            this.searchForm.VendorName='';
            this.searchForm.VendorNick='';
            this.searchForm.VendorEn='';
            this.searchForm.Tel='';
            this.searchForm.VendorLevel='';
            this.searchForm.EnableFlag='';
        },
         //新增或编辑页面回调
         callback(){
            let actionName = this.isUpdate?'编辑':'新增';
            this.showNotify(actionName+'规格数据成功','success');
            this.dialogDomain.dialogVisible=false;
            this.dataBind();
        },
         //分页方法
         handleSizeChange(val){
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val){
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },
        dataBind(){
            this.isLoading=true;
            this.$http.get('./api/Vendor',{
                params:{
                    PageIndex: this.pageDomain.PageIndex,
                    PageSize: this.pageDomain.PageSize,
                    VendorCode:this.searchForm.VendorCode,
                    VendorName: this.searchForm.VendorName,
                    VendorNick: this.searchForm.VendorNick,
                    VendorEn: this.searchForm.VendorEn,
                    Tel: this.searchForm.Tel,
                    VendorLevel: this.searchForm.VendorLevel,
                    EnableFlag: this.searchForm.EnableFlag,
                }
            })
                .then(res => {
                    this.tableData = res.Data;
                    this.pageDomain.TotalCount = res.Count;
                    this.isLoading = false;
                })
        },



        exports() {
            this.$confirm('即将导出报表，是否继续？', '系统提示', {
                confirmButtonText: '导出',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.request({
                    method: "GET",
                    loading: this.$loading(),
                    url: "/api/Vendor/Export",
                    responseType: 'blob'
                }).then((res) => {
                    const blob = new Blob([res])
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '供应商信息.xls'; //下载后文件名
                    downloadElement.click(); //点击下载
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })


            }).catch((err) => {
                console.log(err);
            })

        },

    }
}
</script>
<style>

 </style>